import React, {Component} from 'react'
import * as echarts from "echarts";
class Home extends Component { // 初始化状态 
    constructor(){
        super();
    }
    state={
        peopleList:''
    }
    componentDidMount() {
        var myChartss = echarts.init(document.getElementById("zhe"));
        var myCharts = echarts.init(document.getElementById("tiao"));
        var myChart = echarts.init(document.getElementById("main"));
        myChart.setOption(
            {
                title: {
                    text: '考研各科分数占比',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    left: 'center',
                    top: 'bottom',
                    data: ['专业课', '专业课基础', '数学', '政治', '英语',  '管理类综合']
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {
                            show: true,
                            type: ['pie', 'funnel']
                        },
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                series: [
                    {
                        name: '分数',
                        type: 'pie',
                        radius: [30, 110],
                        center: ['50%', '50%'],
                        roseType: 'area',
                        data: [
                            {value: 150, name: '专业课'},
                            {value: 150, name: '专业课基础'},
                            {value: 150, name: '数学'},
                            {value: 100, name: '政治'},
                            {value: 100, name: '英语'},
                            {value: 200, name: '管理类综合'},
                        ]
                    }
                ]
            }            
        );
        myCharts.setOption(
            {
                title: {
                    text: '四级英语分数占比',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    left: 'center',
                    top: 'bottom',
                    data: ['听力','阅读','翻译','写作']
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {
                            show: true,
                            type: ['pie', 'funnel']
                        },
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                series: [
                    {
                        name: '分数',
                        type: 'pie',
                        radius: [30, 110],
                        center: ['50%', '50%'],
                        roseType: 'area',
                        data: [
                            {value: 248.5, name: '听力'},
                            {value: 248.5, name: '阅读'},
                            {value: 106.5, name: '翻译'},
                            {value: 106.5, name: '写作'},
                        ]
                    }
                ]
            }            
        );
        myChartss.setOption(
            {
                title: {
                    text: '六级英语分数占比',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    left: 'center',
                    top: 'bottom',
                    data: ['听力','阅读','翻译','写作']
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {
                            show: true,
                            type: ['pie', 'funnel']
                        },
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                series: [
                    {
                        name: '分数',
                        type: 'pie',
                        radius: [30, 110],
                        center: ['50%', '50%'],
                        roseType: 'area',
                        data: [
                            {value: 248.5, name: '听力'},
                            {value: 106.5, name: '翻译'},
                            {value: 248.5, name: '阅读'},
                            {value: 106.5, name: '写作'},
                        ]
                    }
                ]
            }            
        );
    }
    render() {
            return(<div style={{float:"left"}}>
              <div id = "main" style = { {  width: 1000, height: 400 }}></div>
                <div id="tiao" style={{float:"left",marginLeft:"15px",width:450,height:400}}></div>
                <div id="zhe" style={{float:"right",marginRight:"15px",width:450,height:400}}></div>
            </div> 
           ); 
    }
  }
  export default Home; 

